<template>
	<view>
		<view class="navBar">
			<view class="left">
				<uni-icons type="left" size="24" @click="toBack"></uni-icons>
			</view>
			<view class="center">订单页面</view>
			<view class="right"></view>
		</view>
		<view class="order-info">
			订单信息：
			<view class="info">
				<view>订单ID：{{ order.orderId }}</view>
				<view>总价：￥{{ order.totalPrice }}</view>
				<view>
					<view>创建时间：</view>
					<view>{{ order.creatTime }}</view>
				</view>
				<view>支付状态：{{ order.paymentStatus }}<uni-icons type="refreshempty" size="20" @click="updataStatus"></uni-icons></view>
			</view>
		</view>
		<view class="order-items">
			订单项信息：
			<view v-for="(item, index) in orderItem" :key="index" class="order-item">
				<view>商品ID：{{ item.goodsId }}</view>
				<view>数量：{{ item.quantity }}</view>
				<view>单价：￥{{ item.price }}</view>
			</view>
		</view>
		<view class="bottom"></view>
		<view class="foot" ref="foot">
			<view class="btn-remove" @click="removeBtn" v-if="order.paymentStatus=='未支付'">取消订单</view>
			<view class="btn-submit" @click="pay" v-if="order.paymentStatus=='未支付'">去支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderItem: [],
				order: {},
				formHtml:'',
			}
		},
		onLoad(option) {
			this.getId(option);
			this.getOrder();
			this.getOrderItem();
			this.updataStatus();
		},
		methods: {
			getId(option) {
				this.orderId = option.orderId;
			},
			toBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			getOrderItem() {
				uni.request({
					url: 'http://localhost:8080/orderItem/findItemByOrderId',
					method: 'GET',
					data: {
						orderId: this.orderId,
					},
					success: res => {
						this.orderItem = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getOrder() {
				uni.request({
					url: 'http://localhost:8080/order/findOrderById',
					method: 'GET',
					data: {
						orderId: this.orderId,
					},
					success: res => {
						this.order = res.data;
						if (this.order.paymentStatus == "fail") {
							this.order.paymentStatus="未支付";
						} else if(this.order.paymentStatus == "success"){
							this.order.paymentStatus="已支付";
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			pay(){
				uni.request({
					url: 'http://localhost:8080/alipay/pay',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					data: {
						outTradeNo:this.order.orderId,
						subject:"测试",
						totalAmount:this.order.totalPrice,
					},
					success: res => {
						this.formHtml=res.data;
						uni.setStorageSync('Form',this.formHtml);
						this.toPayForm();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toPayForm(){
				uni.navigateTo({
					url: '/pages/payForm/payForm',
				});
			},
			removeBtn(){
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: res=> {
						if (res.confirm) {
							this.removeOrder();
						}
					}
				});
			},
			removeOrder(){
				uni.request({
					url: 'http://localhost:8080/order/cancelOrder',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					data: {
						token:uni.getStorageSync("token"),
						orderId:this.orderId,
					},
					success: res => {
						console.log(res.data);
						if (res.data=='取消订单') {
							uni.showToast({
								title:"已取消订单",
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1,
								});
							},1000)
						}
					},
				});
			},
			updataStatus(){
				uni.request({
					url: 'http://localhost:8080/order/updateOrderStatus',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					data: {
						orderId:this.orderId,
					},
					success: res => {
						console.log(res.data);
						this.getOrder();
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	.navBar {
		display: flex;
		height: 100rpx;
		background-color: white;
		align-items: center;
		padding: 0 30rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: 100rpx;
		/* #endif */

		.left {
			flex: 1;
		}

		.center {
			flex: 1;
			color: #646566;
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
		}

		.right {
			flex: 1;
		}
	}

	.order-info {
		margin: 20px;
		font-size: 16px;
		color: #333;

		.info {
			margin-top: 10rpx;
			padding: 10px;
			background-color: white;
			border: 1px solid #ddd;
			background-color: white;
			border-radius: 25rpx;

			>view {
				margin-bottom: 10px;
			}
		}

	}

	.order-items {
		margin: 20px;
		font-size: 16px;
		color: #333;

		.order-item {
			margin-top: 10px;
			padding: 10px;
			border: 1px solid #ddd;
			background-color: white;
			border-radius: 25rpx;

			>view {
				margin-bottom: 5px;
			}
		}
	}
	.bottom{
		height: 100rpx;
	}
	.foot {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		background-color: white;

		.btn-submit{
			margin-right: 50rpx;
			width: 200rpx;
			height: 80rpx;
			background-color: #15b1ff;
			color: white;
			font-size: 38rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 50rpx;
	
		}
		.btn-remove{
			margin-left: 50rpx;
			width: 200rpx;
			height: 80rpx;
			background-color: #ff2a2a;
			color: white;
			font-size: 38rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}
</style>